<template>
  <div v-html="html"></div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import MarkdownIt from "markdown-it";
import hljs from "highlight.js";
import markdownItKatex from "@/utils/markdownItKatex";

const props = defineProps<{ content: string }>();

/**
 * 高鲁棒性数学 + Markdown 预处理
 * （经过你截图问题优化）
 *
 * 1. 修复 \$ 等 JSON 转义符号
 * 2. 更安全地还原 \\\( \\\[ 而不破坏 LaTeX 的 \\
 * 3. 把 \( ... \) → $...$（行内公式）
 * 4. 把 \[ ... \] → $$...$$（块级公式）
 * 5. 自动修复 "。 ####" / "。 -" 这类 markdown 格式被挤在一行的问题
 */
const processed = computed(() => {
  let text = props.content || "";

  /* ---------- 1. 还原被转义美元符号 ---------- */
  text = text.replace(/\\\$/g, "$");

  /* ---------- 2. 安全修复 JSON 反斜杠 ---------- */
  text = text
    .replace(/\\\\\(/g, "\\(")
    .replace(/\\\\\)/g, "\\)")
    .replace(/\\\\\[/g, "\\[")
    .replace(/\\\\\]/g, "\\]");

  /* ---------- 2.5. 修复被双反斜杠包裹的 LaTeX 命令 ---------- */
  text = text.replace(/\\\\([A-Za-z]+)/g, (_, command) => `\\${command}`);

  /* ---------- 3. \( ... \) → $...$ ---------- */
  text = text.replace(/\\\(([\s\S]+?)\\\)/g, (_, g1) =>
    `$${g1}$`.replace(/\$\$/g, "$")
  );

  /* ---------- 4. \[ ... \] → $$...$$ ---------- */
  text = text.replace(/\\\[([\s\S]+?)\\\]/g, (_, g1) => `\n$$${g1}$$\n`);

  /* ---------- 5. 修复 "句号 + ####" / "句号 + -" ---------- */
  text = text
    .replace(/([。\.!?！])\s+(#{1,6}\s+)/g, "$1\n$2")
    .replace(/([。\.!?！])\s+(-\s+)/g, "$1\n$2");

  /* ---------- 6. 修复“连续 ####标题”问题 ---------- */
  // 例如："#### 步骤详解#### 步骤 1"
  text = text.replace(/(#{2,6}[^#\n]+?)(#{2,6}\s+)/g, (_, a, b) => `${a}\n${b}`);

  /* ---------- 7. 修复 “中文后直接跟 #### ” ---------- */
  // 例如："结论### 步骤"
  text = text.replace(/([\u4e00-\u9fa5])\s*(#{2,6}\s+)/g, "$1\n$2");

  /* ---------- 8. 修复 LLM 输出 markdown 分隔不规范 ---------- */
  // 强制让 ### 开头的标题独占一行
  text = text.replace(/\s*(#{2,6}\s+[^\n]+)/g, "\n$1");
  

  return text;
});


/** Markdown + KaTeX 渲染器 */
const md = new MarkdownIt({
  html: true,
  breaks: true,
  linkify: true,
  highlight(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return `<pre><code class="hljs">${
        hljs.highlight(code, { language: lang }).value
      }</code></pre>`;
    }
    return `<pre><code class="hljs">${md.utils.escapeHtml(code)}</code></pre>`;
  }
});

// KaTeX 插件（使用最新版 KaTeX 避免旧版本命令缺失）
md.use(markdownItKatex, {
  throwOnError: false,
  errorColor: "#cc0000",
});


const html = computed(() => md.render(processed.value));
</script>

<style scoped>
/* 统一字体（KaTeX 默认太大）—— ChatGPT 使用相对较小的公式字体 */
:deep(.katex) {
  font-size: 0.97em !important;
}

/* 行内公式与文本完美对齐 —— ChatGPT 风格 */
:deep(span.katex) {
  display: inline-block;
  
}

/* 防止长公式把行距撑开 */
:deep(.katex-html) {
  line-height: 1.1;
}

/* 行间公式（display）左右居中，上下间距自然 */
:deep(.katex-display) {
  margin: 0.8rem auto !important;  /* 上下距离与 ChatGPT 接近 */
  text-align: center !important;
}

/* display 公式内部行距（如 aligned 环境） */
:deep(.katex-display .base) {
  line-height: 1.25 !important;
}

/* 让矩阵、分段函数等对齐 */
:deep(.katex .mspace) {
  margin-right: 0.15em;
}
</style>
